<!-- html -->
<template>
  <h2 class="h2">路由传参</h2>

  <!-- 路由query传参，模板字符串嵌入js -->
  <RouterLink class="routerLink1"
    :to="`/routeHome/routeTransmitTest1/routeTransmitTest1Home?title=${contentObj.title}&content=${contentObj.content}`">
    首页
  </RouterLink>
  <!-- 路由query传参，对象传参 -->
  <!-- <RouterLink class="routerLink1"
      :to="{ path: '/routeHome/routeTransmitTest1/routeTransmitTest1Home', query: { title: contentObj.title, content: contentObj.content } }">
      首页
    </RouterLink> -->

  <!-- 路由params传参，模板字符串嵌入js -->
  <RouterLink class="routerLink1"
    :to="`/routeHome/routeTransmitTest1/routeTransmitTest1Page1/${contentObj.title}/${contentObj.content}`">
    页面1
  </RouterLink>
  <!-- 路由params传参，对象传参 -->
  <!-- <RouterLink class="routerLink1"
    :to="{ name: 'routeTransmitTest1Page1', params: { title: contentObj.title, content: contentObj.content } }">
    页面1
  </RouterLink> -->

  <!-- 路由props传参，query模式 -->
  <!-- <RouterLink class="routerLink1"
    :to="{ path: '/routeHome/routeTransmitTest1/routeTransmitTest1Page2', query: { title: contentObj.title, content: contentObj.content } }">
    页面2
  </RouterLink> -->
  <!-- 路由props传参，params模式 -->
  <RouterLink class="routerLink1"
    :to="{ name: 'routeTransmitTest1Page2', params: { title: contentObj.title, content: contentObj.content } }">
    页面2
  </RouterLink>
  <hr class="hr1">
  <RouterView />
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'routeTransmitTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { ref } from 'vue'
//数据
let contentObj = ref({ title: '标题', content: '内容' })
</script>

<!-- 样式 -->
<style scoped></style>